<template>
  <div class="user">
    <!-- 模板组件 -->
    <systemComponent :headerData="headerData" :tableData="tableData" :currentpage="currentpage" :pagesize="pagesize"
      :total="total" @CurrentChange="CurrentChange" @SizeChange="SizeChange">
      <!-- 搜索 -->
      <template v-slot:searchSlot>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="账号">
            <el-input v-model="formInline.account" placeholder="输入账号模糊查询"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="formInline.sex" placeholder="请选择" popper-class="zzzzzzzzzClass" clearable>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>

          <template v-if="isExpend">
            <el-form-item label="真实名字">
              <el-input v-model="formInline.name" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="formInline.telephone" placeholder="请输入完整手机号码"></el-input>
            </el-form-item>
            <el-form-item label="用户状态">
              <el-select v-model="formInline.status" placeholder="请选择" clearable>
                <el-option label="正常" value="1"></el-option>
                <el-option label="冻结" value="2"></el-option>
              </el-select>
            </el-form-item>
          </template>

          <el-form-item>
            <el-button type="primary" @click="userTableDataSearch()"><i class="el-icon-search"></i> 查询</el-button>
            <el-button type="primary" @click="refresh()"><i class="el-icon-refresh-right"></i> 重置</el-button>
            <a @click="expendFn()">{{ isExpend ? "收起" : "展开" }}
              <i :class="isExpend ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></a>
          </el-form-item>
        </el-form>
      </template>

      <!-- 按钮 -->
      <template v-slot:btnSlot>
        <el-button type="primary" @click="addUserData">
          <i class="el-icon-plus"></i> 添加用户
        </el-button>
        <el-button type="primary" @click="excelExportSearch"><i class="el-icon-download"></i>导出</el-button>
        <!-- <el-button type="primary"><i class="el-icon-upload"></i>导入</el-button> -->
        <el-button type="primary" @click="trashVisible=true"><i class="el-icon-takeaway-box"></i>回收站</el-button>
        <!-- <el-button type="primary" @click="openSearchDialog"><i class="el-icon-files"></i>高级查询</el-button> -->
      </template>

      <!-- 图片 -->
      <template v-slot:avatar="{ row }">
        <div>
          <el-image class="tablePic" :src="row.avatar" :preview-src-list="[row.avatar]">
          </el-image>
        </div>
      </template>

      <!-- 操作 -->
      <template v-slot:operation="{ row, scope }">
        <div>
          <a class="editTxt" @click="editData(row)">编辑</a>
          <el-dropdown trigger="click">
            <a>更多<i class="el-icon-arrow-down"></i></a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>详情</el-dropdown-item>
              <el-dropdown-item>密码</el-dropdown-item>
              <el-dropdown-item><span @click="delDataSearch(scope)">删除</span>
              </el-dropdown-item>
              <el-dropdown-item>解冻</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </template>
    </systemComponent>

    <!-- 抽屉 -->
    <el-drawer size="500" :title="drawerTitle" :visible.sync="drawer" :direction="direction">
      <!-- 抽屉内的实质内容 -->
      <div class="drawBox" v-infinite-scroll>
        <!-- 表单验证 -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户账号" prop="userAccount" label-width="113px">
            <el-input v-model="ruleForm.userAccount" placeholder="请输入用户账号"></el-input>
          </el-form-item>

          <template v-if="passwordIsShow">
            <el-form-item label="登录密码" prop="loginPassword" label-width="113px">
              <el-input v-model="ruleForm.loginPassword" placeholder="请输入登录密码"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="checkPassword" label-width="113px">
              <el-input v-model="ruleForm.checkPassword" placeholder="请输入确认密码"></el-input>
            </el-form-item>
          </template>


          <el-form-item label="用户姓名" prop="userName" label-width="113px">
            <el-input v-model="ruleForm.userName" placeholder="请输入用户姓名"></el-input>
          </el-form-item>
          <el-form-item label="工号" prop="jobNumber" label-width="113px">
            <el-input v-model="ruleForm.jobNumber" placeholder="请输入工号"></el-input>
          </el-form-item>
          <!-- <el-form-item label="职务" prop="job" label-width="113px" class="job">
            <el-select multiple v-model="select1" >
              <el-option v-for="item in selectOptions" :key="item.id" :label="item.roleName" :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="dialogFormVisible = true">搜索</el-button>
          </el-form-item> -->

          <!-- <el-form-item label="角色分配" prop="role" label-width="113px">
            <el-select v-model="ruleForm.role" multiple placeholder="请选择角色">
              <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="部门分配" prop="department" label-width="113px">
            <el-input v-model="ruleForm.department" placeholder="点击选择部门"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="租户分配" prop="rent" label-width="113px">
            <el-input v-model="ruleForm.rent" placeholder="请选择租户分配"></el-input>
          </el-form-item> -->

          <el-form-item label="身份" prop="identity" label-width="113px">
            <el-radio-group v-model="ruleForm.identity">
              <el-radio label="普通用户"></el-radio>
              <el-radio label="上级"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="头像" prop="picture" label-width="113px">
            <el-upload class="avatar-uploader" action :show-file-list="false" :http-request="httprequest">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="生日" prop="birthday" label-width="113px">
            <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="性别" prop="sex" label-width="113px">
            <el-select class="select" v-model="ruleForm.sex" placeholder="请选择性别" clearable>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="邮箱" prop="email" label-width="113px">
            <el-input v-model="ruleForm.email" placeholder="请选择邮箱"></el-input>
          </el-form-item>

          <el-form-item label="手机号码" prop="cellphone" label-width="113px">
            <el-input v-model="ruleForm.cellphone" placeholder="请选择手机号码"></el-input>
          </el-form-item>
          <el-form-item label="座机" prop="telephone" label-width="113px">
            <el-input v-model="ruleForm.telephone" placeholder="请选择座机"></el-input>
          </el-form-item>

          <el-form-item label="工作流引擎" prop="workflow" label-width="113px">
            <el-radio-group v-model="ruleForm.workflow">
              <el-radio label="同步"></el-radio>
              <el-radio label="不同步"></el-radio>
            </el-radio-group>
          </el-form-item>

          <div class="drawBottom">
            <div class="right">
              <el-button>取消</el-button>
              <el-button type="primary" @click="addForm">提交</el-button>
            </div>
          </div>

          <!-- 上级部门下拉，select -->
        </el-form>
      </div>
    </el-drawer>

    <!-- 职务弹窗 -->
    <el-dialog title="职务选择" :visible.sync="dialogFormVisible">
      <el-row>
        <el-col :span="16">
          <el-form :model="form">
            <el-form-item label="职务名称">
              <el-input v-model="form.jobName" autocomplete="off"></el-input>
              <el-button type="primary"><i class="el-icon-search"></i> 查询</el-button>
              <el-button type="primary"><i class="el-icon-refresh-right"></i> 重置</el-button>
            </el-form-item>
            <el-table :data="dialogTable" style="width: 80%" stripe border>
              <!-- 单选 -->
              <el-table-column width="40">
                <template slot-scope="scope">
                  <el-radio class="radio" :label="scope.row" v-model="radio" @change.native="getCurrentRow(scope.row)">
                    &nbsp;1</el-radio>
                </template>
              </el-table-column>

              <el-table-column align="center" prop="jobName" label="职务名称">
              </el-table-column>
              <el-table-column align="center" prop="jobCode" label="职务编码">
              </el-table-column>
              <el-table-column align="center" prop="jobLevel" label="职级">
              </el-table-column>
            </el-table>
          </el-form>
        </el-col>

        <el-col :span="8">
          <div class="chooseTxt">已选职务</div>
          <el-table :data="chooseTable" style="width: 100%" stripe border>
            <el-table-column align="center" prop="jobName" label="职务名称">
            </el-table-column>
            <el-table-column align="center" prop="operation" label="操作">
              <div class="choosedatadel" @click="chooseDataDel">删除</div>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
      </div>
    </el-dialog>


    <!-- 回收站组件 -->
    <trash :trashVisible="trashVisible"></trash>


    <!--  高级查询组件-->
    <searchDialog ref="searchDialogDom" @andOr="andOr">


    </searchDialog>



  </div>
</template>


<script>
import systemComponent from "@/components/part-wwx/systemComponent";
import trash from "@/components/part-wwx/trash";
import searchDialog from '@/components/part-wwx/searchDialog'
import {
  userTableData,
  addData,
  delData,
  mesTableData,
  excelExport,
  uploadimage,
  optionData 
} from "@/api/api-wwx/sysUser";
export default {
  data() {
    // 校验
    let _self = this;
    let validateUserPassword = (rule, value, callback) => {
      let myreg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{6,}$/;

      if (!myreg.test(value)) {
        callback(new Error("密码应由6位以上字母、数字、字符串组合而成"));
      } else {
        callback();
      }
    };
    let validateCheckPassword = (rule, value, callback) => {
      if (_self.ruleForm.checkPassword != _self.ruleForm.loginPassword) {
        callback(new Error("两次输入的密码必须一致"));
      } else {
        callback();
      }
    };

    return {
      passwordIsShow:true,
      trashVisible: false,
      imageUrl: "", //图片路径
      selectedItems: [],
      drawer: false, //抽屉是否打开
      direction: "rtl", //抽屉方向
      drawerTitle: "新增", //抽屉标题
      //抽屉表单校验
      ruleForm: {
        userAccount: "", //用户账号
        loginPassword: "", //登陆密码
        checkPassword: "", //确认密码
        userName: "", //用户姓名
        jobNumber: "", //工号
        job: "", //职务
        role: "",
        department: "",
        rent: "",
        identity: "", //身份
        picture: "", //头像
        birthday: "",
        sex: "",
        email: null,
        cellphone: null,
        telephone: "",
        workflow: "",
        avatar: ''

      },
      select1: [], // 职务model
      //抽屉校验
      rules: {
        userAccount: [
          { required: true, message: "用户账号不能为空", trigger: "blur" }
        ],
        loginPassword: [
          { 
            requrired:true,
            validator: validateUserPassword,
            trigger: "change"
          }
        ],
        checkPassword: [
          {
            required: true,
            validator: validateCheckPassword,
            trigger: "change"
          }
        ],
        userName: [
          { required: true, message: "用户姓名不能为空", trigger: "blur" }
        ],
        jobNumber: [{ required: true, message: "请输入工号", trigger: "blur" }]
      },

      isExpend: false, //是否展开
      isOperationExpend: false, //操作内更多展开
      // 筛选条件表
      formInline: {
        account: "",
        sex: "",
        name: "",
        telephone: "",
        status: "",

      },
      // 表单头部
      headerData: [
        {
          prop: "username",
          label: "用户账号",
          width: "120",
          sortable: true
        },
        {
          prop: "realname",
          label: "用户姓名",
          width: "120"
        },
        {
          prop: "avatar",
          label: "头像",
          width: "150",
          slot: true
        },
        {
          prop: "sexName",
          label: "性别",
          width: "130",
          sortable: true
        },
        {
          prop: "birthday",
          label: "生日",
          width: "140",
          sortable: true
        },
        {
          prop: "phone",
          label: "手机号码",
          width: "140"
        },
        {
          prop: "orgCodeTxt",
          label: "部门"
        },
        {
          prop: "departIds_dictText",
          label: "负责部门"
        },
        {
          prop: "status_dictText",
          label: "状态",
          width: "130"
        },
        {
          prop: "operation",
          label: "操作",
          width: "200",
          slot: true
        }
      ],
      // 表格数据
      tableData: [],
      // 选择数量
      num: "",

      pageNo: 1, //页码
      pageSize: 5, //

      //抽屉多选框
      options: [
      ],

      //id表
      idList: [],

      // 弹窗
      dialogFormVisible: false,
      form: {
        jobName: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },

      //弹窗表格数据
      dialogTable: [
        // {
        // id....
        //   jobName: "老总",
        //   jobCode: "总经理",
        //   jobLevel: "一级",
        // },
        // {
        //   jobName: "研发部经理",
        //   jobCode: "项目领导",
        //   jobLevel: "二级",
        // },
      ],

      // select选择框,没想好
      value1: "dsahjk",
      selectOptions: [
        {
          value: "laozong",
          label: ""
        },
      ],

      // 弹窗表格单选
      radio: "",
      chooseData: "", //选中数据

      // 弹窗2表格
      chooseTable: [],

      // 多选表格
      selections: "",

      // 页码
      currentpage: 1,
      currentpage: 1,
      total: 0,
      pagesize: 50,
      page: 1,
      limit: 10,
      superQueryMatchType:""
    };
  },
  methods: {
    // 点击提交，增加
    addForm() {
      let _self = this;
      console.log(_self.ruleForm.avatar);
      let data = {
        activitiSync: "1",
        avatar: `http://localhost:8080/jeecg-boot/sys/common/static/${_self.ruleForm.avatar}`,
        birthday: _self.ruleForm.birthday,
        confirmpassword: _self.ruleForm.checkPassword,
        departIds: "",
        // email: _self.ruleForm.email,
        // phone: _self.ruleForm.cellphone,
        // post:'',
        realname: _self.ruleForm.userName,
        realTenantIds: "",
        // selecteddepartment: "",
        selectedroles: "",
        sex: _self.ruleForm.sex,
        userIdentity: "1",
        username: _self.ruleForm.userName,
        workNo: _self.ruleForm.jobNumber
      };
      addData(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.drawer = false;
          _self.userTableDataSearch();
          _self.$refs['ruleForm'].resetFields()
        }
      });
    },
    // 收起展开按钮
    expendFn() {
      this.isExpend = !this.isExpend;
    },
    // 重置数据
    refresh() {
      let _self = this;
      _self.formInline.account = "";
      _self.formInline.sex = "";
      _self.formInline.name = "";
      _self.formInline.telephone = "";
      _self.formInline.status = "";
      this.userTableDataSearch();
    },
    // 获取table数据
    userTableDataSearch() {
      let _self = this;
      console.log(_self.formInline.account);
      _self.tableData = [];
      let pageX=1
      if(_self.formInline.account||_self.formInline.sex||_self.formInline.name||_self.formInline.telephone||_self.formInline.status){
        pageX=1
      }else{
        pageX=_self.pageNo
      }
      
      let data = {
        pageNo:pageX,
        pageSize: _self.pageSize,
        username: _self.formInline.account,
        sex: _self.formInline.sex,
        realname: _self.formInline.name,
        phone: _self.formInline.telephone,
        status: _self.formInline.status,
        superQueryMatchType:_self.superQueryMatchType,
        
      };
      userTableData(data).then(res => {
        console.log(res);
        if (res.code == 0) {
          _self.total = res.result.total
          let list = res.result.records;
          console.log(list);
          _self.idList = [];
          for (let item of list) {
            let sexName=''
            if(item.sex==2){
              sexName='女'
            }else if(item.sex==1){
              sexName='男'
            }
            _self.tableData.push({
              jobNumber:item.workNo,
              username: item.username,
              realname: item.realname,
              avatar: item.avatar,
              sexName: sexName,
              birthday: item.birthday,
              phone: item.phone,
              orgCodeTxt: item.orgCodeTxt,
              departIds_dictText: item.departIds_dictText,
              status_dictText: item.status_dictText,
              operation: item.operation
            });
            _self.idList.push(item.id);
          }
        }
      });
    },
    // 上传图片
    httprequest(par) {
      console.log(par);

      let _self = this;
      // par.flie当前图片对象

      // 图片对象上传的话 必须以form表单进行上传
      let formatDate = new FormData();
      formatDate.append('biz', 'temp')
      formatDate.append('file', par.file)


      uploadimage(formatDate).then((res) => {
        console.log(res);
        if (res.code == 0) {
          _self.imageUrl = `http://localhost:8080/jeecg-boot/sys/common/static/${res.message}`
          _self.ruleForm.avatar = res.message
          console.log(_self.formInline.avatar);
        }
      });
    },
    // 删除数据
    delDataSearch(scope) {
      let _self = this;
      console.log(scope);
      let id = _self.idList[scope.$index];
      delData(id).then(res => {
        _self.userTableDataSearch();
      });
    },

    //表格单选框
    getCurrentRow(val) {
      console.log(val);
      this.chooseTable = [
        {
          jobName: ""
        }
      ];
      this.chooseData = val.jobName;
      this.chooseTable[0].jobName = this.chooseData;
    },

    // 表格单选框删除
    chooseDataDel() {
      this.chooseTable = [];
      this.radio = ''
    },
    // 获取弹窗表格数据
    mesTableDataSearch() {
      let _self = this;
      let data = {
        pageNo: 1,
        pageSize: 5
      };
      mesTableData(data).then(res => {
        console.log(res);
        if (res.code == 0) {
          let list = res.result.records;
          console.log(list);
          for (let item of list) {
            _self.dialogTable.push({
              jobName: item.name,
              jobCode: item.code,
              jobLevel: item.postRank
            });
          }
        }
      });
    },

    // 导出excel，复制的
    excelExportSearch() {
      let _self = this;
      let data = {
        // selections: _self.selections,
        pageNo: 1,
        pageSize: 10
      };
      excelExport(data).then(res => {
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([res], { type: "application/vnd.ms-excel" }),
            "导出文件.xls"
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([res], { type: "application/vnd.ms-excel" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "导出文件.xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },
    valueChange1() {
      console.log("////// change1:", this.select1);
    },

    // 打开弹窗
    addUserData() {
      this.drawer = true;
      this.passwordIsShow=true

      this.ruleForm.avatar = ''
      this.ruleForm.birthday = ''
      // this.ruleForm.departIds_dictText=row.departIds_dictText
      // this.ruleForm.orgCodeTxt=row.orgCodeTxt
      // this.ruleForm.operation=row.operation
      this.ruleForm.cellphone = ''
      this.ruleForm.userName = ''
      this.ruleForm.userName = ''
      this.ruleForm.userAccount = ''
      this.imageUrl=''
    },
    CurrentChange(a) {
      //改变page,显示第几页
      console.log(a);
      this.pageNo = a;
      this.userTableDataSearch();
    },
    SizeChange(val) {
      //改变limit,一页显示多少条
      console.log(val);
      let _self = this;
      _self.pageSize = val;
      _self.userTableDataSearch();
    },


    // 编辑
    editData(row) {
      this.optionDataSearch()
      this.passwordIsShow=false
      this.drawer = true
      console.log(row);
      this.ruleForm.avatar = row.avatar
      this.ruleForm.birthday = row.birthday
      this.ruleForm.jobNumber = row.jobNumber
      // this.ruleForm.departIds_dictText=row.departIds_dictText
      // this.ruleForm.orgCodeTxt=row.orgCodeTxt
      // this.ruleForm.operation=row.operation
      this.ruleForm.cellphone = row.phone
      this.ruleForm.userName = row.realname
      this.ruleForm.userName = row.realname
      this.ruleForm.userAccount = row.username
      this.imageUrl=row.avatar
      this.selectOptions[0].value=
       this.form.jobName
      
      console.log(this.selectOptions);
    },
    // 下拉框
    optionDataSearch(){
      let _self=this
      optionData().then(res=>{
        _self.options=res.result
        console.log(_self.options);
      })
    },
    // 打开高级查询
    openSearchDialog(){
      this.$refs["searchDialogDom"].openDialog()
      console.log();
    },

    // 子组件
    andOr(val){
      console.log(val);
      _self.superQueryMatchType=val
      
    }
  },
  mounted() {
    console.log("/// ////// 1111111111111111111");
    this.userTableDataSearch();
    this.mesTableDataSearch();
    setTimeout(() => {
      let arr = JSON.parse(JSON.stringify(this.selectOptions));
      console.log("/// arr:", arr);
      console.log("//// this.select1", this.select1);
      if (this.select1.length == 0) {
        this.select1.push(arr[0].value);
      }
    }, 500);
    console.log("/// ////// 2222222222222222222");
  },
  components: {
    systemComponent,
    trash,
    searchDialog
  }
};
</script>
<style scoped>
.choosedatadel {
  color: #63b0ff;
}

.user .choosedatadel:hover {
  cursor: pointer;
}

.chooseTxt {
  margin-bottom: 20px;
  font-weight: bolder;
}

.el-drawer__body {
  overflow: auto;
  /* 滚动条隐藏 */

  /* overflow-x: auto; */
}

.el-drawer__container ::-webkit-scrollbar {
  display: none;
}

.user .tablePic {
  width: 50px;
  height: 50px;
}

.user a {
  margin-left: 20px;
}

.user .el-drawer {
  width: 658px;
}

.user .editTxt {
  border-right: 2px solid rgb(206, 202, 202);
  padding-right: 20px;
  line-height: 14px;
}

.user .el-drawer__header {
  border-bottom: 1px solid rgb(210, 208, 208);
  padding-bottom: 20px;
}

.user .drawBox {
  width: 500px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 60px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.user .el-date-editor {
  width: 100%;
}

.user .el-select {
  width: 100%;
}

.drawBottom {
  position: absolute;
  bottom: 0;
  right: 0;
}

.el-drawer__title {
  position: relative;
}

.drawBottom {
  padding: 10px;
  width: 658px;
  background-color: #ffffff;
  border-top: 1px solid rgb(216, 213, 213);
}

.user .el-input--prefix .el-input__inner {
  padding-left: 70x;
}

.user .job .el-select {
  width: 70%;
  margin-right: 20px;
}

.user .el-dialog {
  width: 80%;
}

.user .el-dialog .el-input {
  width: 50%;
  margin-right: 20px;
}
</style>